<template>
  <div :class="[{ 'fill-base': !isMyCase }]" style="padding-bottom: 16px">
    <div class="title-box" v-if="!isMyCase">
      <div class="title-text">{{ o.data.title }}</div>
      <div class="title-more">+查看更多</div>
    </div>
    <div
      class="flex-warp"
      :style="{ width: case_module_type === 1 ? '100vw' : '' }"
    >
      <div
        class="case-box"
        :class="[
          { 'case-box-type1': case_module_type == 1 },
          { 'fill-base': !isMyCase }
        ]"
        v-for="(item, index) in case_module_type === 1 ? 2 : 1"
        :key="index"
      >
        <img
          class="case-cover"
          src="https://lbqny.migugu.com/admin/diy/default.png"
        />
        <div class="case-bottom fill-base">
          <div
            class="case-title f-paragraph ellipsis"
            :class="[{ 'f-title text-bold': type == 0 }]"
          >
            案例标题
          </div>
          <div class="flex-center">
            <div class="flex-1">
              <div class="flex-y-center mt-md">
                <div class="case-tag">风格</div>
                <div class="case-tag">面积</div>
                <div class="case-tag">价格</div>
              </div>
              <div
                class="flex-center"
                :class="[
                  { 'mt-lg': case_module_type === 0 },
                  { 'mt-md': case_module_type === 1 }
                ]"
              >
                <div class="flex-y-center flex-1">
                  <div class="f-caption c-caption">99浏览</div>
                  <div class="f-caption c-caption ml-md">999收藏</div>
                </div>
                <img
                  class="case-avatar-mini"
                  src="https://lbqny.migugu.com/admin/diy/default.png"
                  v-if="case_module_type === 1"
                />
              </div>
            </div>
            <img
              class="case-avatar"
              src="https://lbqny.migugu.com/admin/diy/default.png"
              v-if="case_module_type === 0"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'site',
  props: {
    o: Object,
    isMyCase: false
  },
  data () {
    return {
      case_module_type: -1
    }
  },
  async created () {
    let { code, data } = await this.$api.renovationCaseConfigInfo()
    if (code !== 200) return
    this.case_module_type = data.case
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.fill-base {
  background: white;
}
.case-box {
  height: 290px;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  font-size: 14px;
  margin: 0 16px;
  box-sizing: border-box;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
}
.case-cover {
  width: 100%;
  height: 193px;
  display: block;
}
.case-bottom {
  width: 100%;
  height: 97px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 16px;
  position: relative;
  line-height: 1;
}

.case-box.case-box-type1 {
  width: 165px;
  height: 188px;
  margin: 0 0 0 13px;
}

.case-box-type1 .case-cover,
.case-box-type1 .case-cover-mask {
  height: 93px;
}

.case-box-type1 .case-bottom {
  padding: 10px;
}
.case-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}
.case-avatar-mini {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}
.case-title {
  color: #414851;
  width: 255px;
}
.case-tag {
  line-height: 1;
  display: inline-block;
  color: #13d567;
  border: 1px solid #13d567;
  border-radius: 4px;
  font-size: 9px;
  padding: 4px 6px;
  margin-right: 5px;
}
.flex-y-center {
  display: flex;
  align-items: center;
}
.mt-md {
  margin-top: 8px;
}
.mt-lg {
  margin-top: 16px;
}
.ml-md {
  margin-left: 8px;
}
.f-caption {
  font-size: 12px;
}
.c-caption {
  color: #999;
}
.title-box {
  display: flex;
  align-items: center;
  height: 50px;
  padding: 0 16px;
}
.title-text {
  flex: 1;
}
.title-more {
  color: #13d567;
}
</style>
